<template>
  <div class="main-viewerContainer" id="centerDiv">
    <div class="mask"></div>
    <div id="cesiumContainer" class="dadi-container"></div>
  </div>
</template>

<script>
// import {initMap, initUI} from "@/components/js/initMap";

// import Cesium from "cesium/Build/Cesium/Cesium";
// import "cesium/Build/Cesium/Widgets/widgets.css";

export default {
  name: "viewerContainer",
  components: {},
  data() {
    return {};
  },
  mounted() {
    // initUI();
    // initMap();
    var viewer = new Cesium.Viewer("cesiumContainer");
    console.log(viewer)
    this.add3DTiles(viewer)


  },
  methods: {
    async add3DTiles(viewer) {
      const classificationTilesetUrl = "/cesium_resource/0901glb/tileset.json";
      // A b3dm tileset used to classify the photogrammetry tileset
      const classificationTileset = await Cesium.Cesium3DTileset.fromUrl(
        classificationTilesetUrl, {
          // classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
        },
      );
      // classificationTileset.style = new Cesium.Cesium3DTileStyle({
      //   color: "rgba(255, 0, 0, 0.5)",
      // });
      viewer.scene.primitives.add(classificationTileset);
      viewer.zoomTo(classificationTileset);
    }
  },
  watch: {},
  computed: {},
  beforeDestroy() {

  },
}
</script>

<style scoped>
.main-viewerContainer {
  position: absolute;
  height: 100%;
  width: 100%;
}

#viewerContainer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url("../assets/img/bg.png");
  background-size: 100% 100%;
  user-select: none;
  pointer-events: none;
  z-index: 2;
}
</style>
<style>
.cesium-viewer-toolbar {
  top: .7875rem;
  right: 6rem;
  display: none;
}

.toolBarRight {
  top: calc(.7875rem + 0.25rem) !important;
  right: 6.5rem !important;
}

.toolBarRight>button:nth-child(1) {
  display: none;
}

/*.toolBarRight > button:nth-child(2){
  display: none;
}*/
.layui-layer {
  /* //position: absolute!important;
  //top: calc(.7875rem + 0.25rem + 35px)!important;
  //right: 6.5rem!important;
  //left: auto!important; */
}

.dropdown-menu>li:nth-child(3) {
  display: none !important;
}

.dropdown-menu>li:nth-child(4) {
  display: none !important;
}

.dropdown-menu>li:nth-child(5) {
  display: none !important;
}
</style>
